<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<title>Demo</title>
		<link rel="stylesheet" th:href="@{/cloudDemo/css/weui.min.css}">
		<style type="text/css">
			#dosubmit{
				width: 80%;
				margin-top: 35px;
			}
		</style>
	</head>

	<body>
		<div class="weui-toptips weui-toptips_warn js_tooltips" style="display: none;">错误提示</div>
		<div class="weui-tab">
    <div class="weui-navbar">
        <div class="weui-navbar__item weui-bar__item_on" data-page="1">上传资料</div>
        <div class="weui-navbar__item" data-page="2">手动开门</div>
    </div>
    <div class="weui-tab__panel">
        <div class="pages">
        	<form action="" method="">
			<div class="weui-cells weui-cells_form">
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
					<div class="weui-cell__bd">
						<input name="name" class="weui-input" type="text" pattern="" placeholder="请输入姓名" />
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">编号</label></div>
					<div class="weui-cell__bd">
						<input name="no" class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入编号" />
					</div>
				</div>
				<div class="weui-cell weui-cell_switch">
					<div class="weui-cell__bd">状态</div>
					<div class="weui-cell__ft">
						<input name="status" class="weui-switch" type="checkbox" />
					</div>
				</div>
				<!--图片上传-->
				<div class="weui-gallery" id="gallery">
					<span class="weui-gallery__img" id="galleryImg"></span>
					<div class="weui-gallery__opr">
						<a href="javascript:" class="weui-gallery__del">
							<i class="weui-icon-delete weui-icon_gallery-delete"></i>
						</a>
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__bd">
						<div class="weui-uploader">
							<div class="weui-uploader__hd">
								<p class="weui-uploader__title">照片上传</p>
							</div>
							<div class="weui-uploader__bd">
								<ul class="weui-uploader__files" id="uploaderFiles">
	
								</ul>
								<div class="weui-uploader__input-box">
									<input id="uploaderInput" class="weui-uploader__input zjxfjs_file" type="file" accept="image/*" multiple="">
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="weui-cell">
					<div class="weui-cell__hd"><label class="weui-label">备注</label></div>
					<div class="weui-cell__bd">
						<input name="remark" class="weui-input" type="text" pattern="" placeholder="请输入备注" />
					</div>
				</div>
				<a href="javascript:;" class="weui-btn weui-btn_primary" id="dosubmit">确定</a>
				
				
				
				</div>
			</form>
        	
        </div>
        <div class="pages" style="display: none;">
			<div class="weui-cells" id="open_btns">
			    <div class="weui-cell">
			        <div class="weui-cell__bd">
			            <p>终端一</p>
			        </div>
			        <div class="weui-cell__ft"><a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" data-id="CBI9S2OY6C">按钮</a></div>
			    </div>
			    <div class="weui-cell">
			        <div class="weui-cell__bd">
			            <p>终端一</p>
			        </div>
			        <div class="weui-cell__ft"><a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" data-id="CBI9S2OY6C">按钮</a></div>
			    </div>
			    <div class="weui-cell">
			        <div class="weui-cell__bd">
			            <p>终端一</p>
			        </div>
			        <div class="weui-cell__ft"><a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" data-id="CBI9S2OY6C">按钮</a></div>
			    </div>
			    <div class="weui-cell">
			        <div class="weui-cell__bd">
			            <p>终端一</p>
			        </div>
			        <div class="weui-cell__ft"><a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" data-id="CBI9S2OY6C">按钮</a></div>
			    </div>
			    <div class="weui-cell">
			        <div class="weui-cell__bd">
			            <p>终端一</p>
			        </div>
			        <div class="weui-cell__ft"><a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary" data-id="CBI9S2OY6C">按钮</a></div>
			    </div>
			</div>
        	
        </div>
    </div>
</div>

	
		<script th:src="@{/cloudDemo/js/jquery.min.js}"></script>
		<script th:src="@{/cloudDemo/js/jquery-weui.min.js}"></script>
		 
		  <!--
		  <script src="../static/cloudDemo/js/jquery.min.js"></script>
		<script tsrc="../static/cloudDemo/js/jquery-weui.min.js}"></script>
		 -->
		<script type="text/javascript">
			//navbar
			$(".weui-navbar__item").click(function() {
				$(this).addClass("weui-bar__item_on").siblings().removeClass("weui-bar__item_on");
				$(".pages").hide();
				$(".pages").eq($(this).index()).show();
			})

			//添加数据
			$("#dosubmit").click(function() {
				var deptId = 1011;
				var name = $("input[name=name]").val();
				var no = $("input[name=no]").val();
				var status = $("input[name=status]").prop("checked") ? "0" : "1";
				var remark = $("input[name=remark]").val();
				var files = $("input[type=file]").val();
				if(!name){
					$(".weui-toptips").show().text("请填写姓名");
					setTimeout(function(){$(".weui-toptips").fadeOut()}, 1000);
					return;
				}
				if(!no){
					$(".weui-toptips").show().text("请填写编号");
					setTimeout(function(){$(".weui-toptips").fadeOut()}, 1000);
					return;
				}
				if(!files){
					$(".weui-toptips").show().text("请添加照片");
					setTimeout(function(){$(".weui-toptips").fadeOut()}, 1000);
					return;
				}
				var formData = new FormData();
				formData.append('no', no);
				formData.append('deptId', deptId);
				formData.append('name', name);
				formData.append('status', status);
				formData.append('remark', remark);
				formData.append('file', $("input[type=file]")[0].files[0]);
				$.showLoading("数据上传中...");
				$.ajax({
					url: 'http://129.204.66.131:8080/api/face/save',
					type: 'POST',
					data: formData,
					async: false,
					cache: false,
					contentType: false,
					processData: false,
					success: function(result) {
						$.hideLoading();
						$.toast("操作成功");
						console.log(result)

					},
					error: function(err) {
						$.hideLoading();
						$.toast("操作失败");
						console.log('请求失败！');

						console.log(err)
					},
					complete: function() {}
				})
			})
			
			//打开门禁
			$("#open_btns .weui-cell .weui-btn").click(function(){
				console.log($(this).data("id"));
				var gateId = $(this).data("id");
				var name = "";
				var type = "";
				$.showLoading("请求中...");
				$.ajax({
    				type: "post",
    				url: "http://129.204.66.131:8080/api/face/openGate",
    				data: {gateId:gateId},
    				dataType: "json",
    				cache: false,
    				success: function(pager) {
    					console.log('请求成功！')
    					$.hideLoading();
						$.toast("操作成功");

					},
    				error: function(err) {
    					console.log('请求失败！')
    					$.hideLoading();
						$.toast("操作失败");
    				}
    			});
				
				
			})
			
			
			
			
			$(function() {
				var tmpl = '<li class="weui-uploader__file" style="background-image:url(#url#)"></li>',
					$gallery = $("#gallery"),
					$galleryImg = $("#galleryImg"),
					$uploaderInput = $("#uploaderInput"),
					$uploaderFiles = $("#uploaderFiles");

				$uploaderInput.on("change", function(e) {
					var src, url = window.URL || window.webkitURL || window.mozURL,
						files = e.target.files;

					/*var self = this
					var e = this.files,
						imgSize = e[0].size;
					console.log(imgSize)
					if(e && e[0]) {
						var reader = new FileReader(),
							img = new Image();
						reader.onload = function(e) {
							console.log(imgSize)
							if(imgSize > 307200) { //图片大于300kb则压缩
								img.src = e.target.result;
								img.onload = function() {
									var result = compress(img);
									console.log(1)
									console.log(result)
									$uploaderFiles.html($(tmpl.replace('#url#', result)));
								}
							} else {
								var result = e.target.result;
								console.log(22)
								console.log(result)
								$uploaderFiles.html($(tmpl.replace('#url#', result)));
							}
						}
						reader.readAsDataURL(e[0]);
						return 1;
					}*/
					for(var i = 0, len = files.length; i < len; ++i) {
						var file = files[i];

						if(url) {
							src = url.createObjectURL(file);
						} else {
							src = e.target.result;
						}
						//修改为只传一张
						$uploaderFiles.html($(tmpl.replace('#url#', src)));
						console.log(src)
					}
				});
				var index; //第几张图片
				$uploaderFiles.on("click", "li", function() {
					index = $(this).index();
					$galleryImg.attr("style", this.getAttribute("style"));
					$gallery.fadeIn(100);
				});
				$gallery.on("click", function() {
					$gallery.fadeOut(100);
				});
				//删除图片
				$(".weui-gallery__del").click(function() {
					$uploaderFiles.find("li").eq(index).remove();
				});

				//压缩图片函数
				function compress(img) {
					//获取照片的拍摄方向
					var orient = getPhotoOrientation(img);
					var initSize = img.src.length;
					if(orient == 6) {
						var width = img.height;
						var height = img.width;
					} else {
						var width = img.width;
						var height = img.height;
					}
					var canvas = document.createElement("canvas");
					var ctx = canvas.getContext('2d');
					//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
					var ratio;
					if((ratio = width * height / 4000000) > 1) {
						ratio = Math.sqrt(ratio);
						width /= ratio;
						height /= ratio;
					} else {
						ratio = 1;
					}
					canvas.width = width;
					canvas.height = height;
					//铺底色
					ctx.fillStyle = "#fff";
					ctx.fillRect(0, 0, canvas.width, canvas.height);
					//判断图片拍摄方向是否旋转了90度,ios目前都是6
					if(orient == 6) {
						ctx.save(); //保存状态
						ctx.translate(width / 2, height / 2); //设置画布上的(0,0)位置，也就是旋转的中心点
						ctx.rotate(90 * Math.PI / 180); //把画布旋转90度
						// 执行Canvas的drawImage语句
						ctx.drawImage(img, Number(0) - height / 2, Number(0) - width / 2, height, width); //把图片绘制在画布translate之前的中心点，
						ctx.restore(); //恢复状态
					} else {
						// 执行Canvas的drawImage语句
						//ctx.drawImage(img, x, y, w, h);
						ctx.drawImage(img, 0, 0, width, height);
					}

					//ctx.drawImage(img, 0, 0, width, height);
					//进行最小压缩
					var ndata = canvas.toDataURL("image/jpeg", 0.4);
					//console.log(ndata)
					canvas.width = canvas.height = 0;
					return ndata;
				};
				//获取照片的元信息（拍摄方向）
				function getPhotoOrientation(img) {
					var orient;
					EXIF.getData(img, function() {
						orient = EXIF.getTag(this, 'Orientation');
					});
					return orient;
				};
			});
		</script>
	</body>

</html>